<template>
  <view class="">
    <u-popup :show="showTime">
      <view class="popup-wrap">
        <view class="pop-header" @click="closeTime">
          <image src="/static/order/close.png" mode="aspectFit"></image>
          <text>选择时间</text>
        </view>
        <view class="popup-box flex-between">
          <view
            :class="timeIndex == index ? 'time-ac' : ''"
            @click="tiemCheck(index)"
            v-for="(item, index) in isOther ? showTimeList1 : showTimeList"
            :key="index">
            {{ item.name }}
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 日历弹框 开始-结束-->
    <u-calendar
      :show="show"
      color="#DA4334"
      :mode="mode"
      :maxDate="maxDate"
      :minDate="minDate"
      :default-date="defaultDate"
      :month-num="12"
      @close="() => (show = false)"
      @confirm="confirmDate"></u-calendar>
  </view>
</template>

<script>
import utils from "../../plugin/util.js";
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
const maxDate = new Date(year + 1, 0, 0).getTime();
const minDate = new Date(year, 0, 1).getTime();
const defaultDate = [`${year}-${month}-${date}`];
const monthNum = (year - 2022 + 1) * 12;
export default {
  props: {
    showTime: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: "single",
    },
    isOther: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      monthNum,
      maxDate,
      minDate,
      defaultDate,
      show: false,
      timeIndex: null,
      showTimeList1: [
        {
          name: "近一年",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 365)
          )}-${utils.timeFormat(new Date(new Date().getTime()))}`,
        },
        {
          name: "本周",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 7)
          )}-${utils.timeFormat(new Date(new Date().getTime()))}`,
        },
        {
          name: "本月",
          time: `${utils.timeFormat(
            new Date(
              new Date().getFullYear() +
                "-" +
                new Date().getMonth() +
                "-" +
                "01"
            )
          )}-${utils.timeFormat(new Date(new Date().getTime()))}`,
        },
        {
          name: "近7天",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 7)
          )}-${utils.timeFormat(new Date())}`,
        },
        {
          name: "近30天",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 30)
          )}-${utils.timeFormat(new Date())}`,
        },
        {
          name: "近90天",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 90)
          )}-${utils.timeFormat(new Date())}`,
        },
        {
          name: "近180天",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 180)
          )}-${utils.timeFormat(new Date())}`,
        },
        { name: "选择时间段", time: "" },
      ],
      showTimeList: [
        {
          name: "昨天",
          time: utils.timeFormat(new Date(new Date().getTime() - 86400 * 1000)),
        },
        {
          name: "本周",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 7)
          )}-${utils.timeFormat(new Date(new Date().getTime()))}`,
        },
        {
          name: "本月",
          time: `${utils.timeFormat(
            new Date(new Date().getTime())
          )}-${utils.timeFormat(
            new Date(new Date().getTime() + 86400 * 1000 * 30)
          )}`,
        },
        {
          name: "近7天",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 7)
          )}-${utils.timeFormat(new Date())}`,
        },
        {
          name: "近30天",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 30)
          )}-${utils.timeFormat(new Date())}`,
        },
        {
          name: "近90天",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 90)
          )}-${utils.timeFormat(new Date())}`,
        },
        {
          name: "近180天",
          time: `${utils.timeFormat(
            new Date(new Date().getTime() - 86400 * 1000 * 180)
          )}-${utils.timeFormat(new Date())}`,
        },
        { name: "选择时间段", time: "" },
      ],
      saveIndex: null,
    };
  },
  onShow() {},
  methods: {
    closeTime() {
      this.$emit("closeTime", false);
    },
    //查看列表的时间弹框选择
    tiemCheck(k) {
      if (k == this.showTimeList.length - 1) {
        this.show = true;
        this.saveIndex = k;
      } else {
        this.timeIndex = k;
      }
      let backObj = { k };
      if (this.timeIndex != null) {
        this.$emit("tiemCheck", {
          k,
          data: this.isOther
            ? this.showTimeList1[this.timeIndex].time
            : this.showTimeList[this.timeIndex].time,
        });
      }
    },
    confirmDate(e) {
      console.log(this.isOther);
      this.show = false;
      this.timeIndex = this.saveIndex;
      this.saveIndex = null;
      if (this.isOther) {
        this.showTimeList1[this.timeIndex].time =
          utils.timeFormat(new Date(new Date(e[0]))) +
          "-" +
          utils.timeFormat(new Date(new Date(e[e.length - 1])));
      } else {
        this.showTimeList[this.timeIndex].time =
          utils.timeFormat(new Date(new Date(e[0]))) +
          "-" +
          utils.timeFormat(new Date(new Date(e[e.length - 1])));
      }

      this.$emit("confirmDate", {
        e,
        data: this.isOther
          ? this.showTimeList1[this.timeIndex].time
          : this.showTimeList[this.timeIndex].time,
        index: this.timeIndex,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-wrap {
  padding: 34upx 32upx 0;
  width: 100%;
  box-sizing: border-box;
  .pop-header {
    position: relative;
    font-weight: bold;
    text-align: center;
    font-size: 28rpx;
    color: #181818;
    margin-bottom: 50upx;
    & > image {
      position: absolute;
      width: 32upx;
      height: 32upx;
      left: 30upx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .popup-box {
    flex-wrap: wrap;
    margin-bottom: 200upx;
    & > view {
      width: 320rpx;
      height: 76rpx;
      background: #ffffff;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      border: 2rpx solid #eaeaea;
      text-align: center;
      line-height: 76upx;
      font-size: 26rpx;
      color: #171717;
      margin-bottom: 20upx;
    }
    .time-ac {
      border: 2rpx solid #da4334;
      color: #da4334;
    }
  }
}
</style>
